
<form action="/SpongeBob/handle" method="POST">
    <h5><a href="/SpongeBob/showme/{id}">Back to Destination</a></h5>
    
    <input type="hidden" name="id" value="{id}" />

    <h5>Name</h5>
    <input type="text" name="name" value="{name}" size="50" />

    <h5>Description</h5>
    <textarea name="description" rows="4" cols="50">{description}</textarea>

    <h5>team</h5>
    <input type="text" name="team" value="{team}" size="50" />

    <h5>position</h5>
    <input type="text" name="position" value="{position}" size="50" />

    <h5>specialty</h5>
    <input type="text" name="specialty" value="{specialty}" size="50" />

    <h5>favorite_activity</h5>
    <input type="text" name="favorite_activity" value="{favorite_activity}" size="50" />

    <h5>Image</h5>
    <input type="text" name="image" value="{image}" size="50" />
    <br><img src="/image/{image}" />

    <div><input type="submit" value="Submit" /></div>
    <div><p><a href="/home">home</a></p></div>
    <!-- id,name,description,image,team,position,specialty,favorite_activity -->
</form>

<style>
    

    h5 {
        margin-top: 20px;
        text-align: center; /* 使标题居中 */
    }

    input[type="text"], textarea {
        width: 100%;
        padding: 10px;
        margin-top: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        margin-bottom: 15px;
    }

    textarea {
        height: 100px;
    }

    input[type="submit"] {
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 15px;
        width: 100%;
    }

    input[type="submit"]:hover {
        background-color: #45a049;
    }

    a {
        color: #0066cc;
        text-decoration: none;
        display: block;
        text-align: center;
        margin-bottom: 20px;
    }

    img {
        max-width: 200px;
        height: auto;
        margin-top: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    form {
        max-width: 400px;
        width: 100%;
        padding: 20px;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
        margin: 0 auto; /* 使表单在容器中居中 */
    }
</style>